<template>
  <el-container>
    <el-header>
      <div class="left-panel">
        <!-- <el-button type="primary" icon="el-icon-plus"></el-button>
        <el-button type="danger" plain icon="el-icon-delete"></el-button> -->
      </div>
      <div class="right-panel">
        <el-alert
          title="请在右下角第二个按钮体验自定义列"
          type="warning"
          :closable="false"
        />
      </div>
    </el-header>
    <el-main class="nopadding">
      <scTable
        ref="table"
        :data="tableData"
        tableName="listCustomColumn"
        :column="column"
        row-key="id"
        stripe
      >
        <template #test111>
          <div>我是插槽</div>
        </template>

        <!-- :apiObj="list.tableData" -->
        <!-- <el-table-column type="selection" width="50"></el-table-column> -->
        <!-- <template #progress="scope">
          <el-progress :percentage="scope.row.progress" />
        </template> -->
      </scTable>
    </el-main>
  </el-container>
</template>
<script setup>
import { ref, reactive } from "vue";
const tableData = [
  {
    id: 111,
    // avatar:
    //   "https://tupian.qqw21.com/article/UploadPic/2020-9/20209112265667154.jpg",
    avatar: "",
    userName: "test",
    fType: 1,
    name: "李四",
    date: "2023-12-11T14:27:29.82",
  },
];
const column = JSON.parse(sessionStorage.getItem("testcolumn")).column.map(
  (item) => {
    if (item.filters?.length) {
      delete item.filters;
    }
    return item;
  }
);
console.log("column", column);
</script>

<script>
// export default {
//   name: "tableCustomColumn",
//   data() {
//     return {
//       list: {
//         tableData: [],
//         // apiObj: this.$API.demo.list,
//         column: [
//           {
//             label: "姓名",
//             prop: "name",
//             width: "150",
//           },
//           {
//             label: "性别",
//             prop: "sex",
//             width: "150",
//             filters: [
//               { text: "男", value: "男" },
//               { text: "女", value: "女" },
//             ],
//           },
//           {
//             label: "邮箱",
//             prop: "email",
//             width: "250",
//             hide: true,
//           },
//           {
//             label: "评分",
//             prop: "num",
//             width: "150",
//             sortable: true,
//           },
//           {
//             label: "进度",
//             prop: "progress",
//             width: "250",
//             sortable: true,
//           },
//           {
//             label: "注册时间",
//             prop: "datetime",
//             width: "150",
//             sortable: true,
//           },
//         ],
//       },
//       column: [],
//     };
//   },
//   mounted() {
//     this.getData();
//   },
//   methods: {
//     getData() {
//       if (sessionStorage.getItem("testcolumn")) {
//         console.log("getData");
//         let arr = JSON.parse(sessionStorage.getItem("testcolumn")).column;
//         console.log(arr);

//         this.column = arr;
//         // this.$forceUpdate();
//         // this.$set(
//         //   this.list,
//         //   "column",
//         //   JSON.parse(sessionStorage.getItem("testcolumn")).column
//         // );
//         // console.log(this.column);
//       }
//     },
//   },
// };
</script>

<style></style>
